<template>
  <div class="screen">
    <Page-title title="九健维修工单数据监控中心" />
    <div class="screen-content">
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="17">
          <Warranty-warning ref="warrantyRef" @ring="handleRing" />
        </el-col>
        <el-col :span="7"> <Warranty-order ref="orderRef" /> </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="17"> <Maintenance-warning ref="maintenanceRef" /> </el-col>
        <el-col :span="7">
          <Environment-data ref="environmentRef" @refresh="handleRefresh" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import WarrantyWarning from "@/views/home/components/WarrantyWarning";
import WarrantyOrder from "@/views/home/components/WarrantyOrder";
import MaintenanceWarning from "@/views/home/components/MaintenanceWarning";
import EnvironmentData from "@/views/home/components/EnvironmentData";
export default {
  name: "big-screen",
  components: { WarrantyWarning, WarrantyOrder, MaintenanceWarning, EnvironmentData },
  data() {
    return {
      audio: null, // 铃声
      timer: null, // 定时器
      refreshTime: 1, // 刷新时间 单位：分钟
      loops: 3, // 循环次数
      allowRing: true, // 是否允许响铃
      isRing: false, // 是否响铃
    };
  },
  mounted() {
    this.getAuth();
  },
  methods: {
    // 授权
    getAuth() {
      this.$confirm("开启工单提示音通知", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.audio = new Audio(require("@/assets/bell.mp3"));
          this.audio.onended = () => {
            this.loops--;
            if (this.loops > 0) {
              this.audio.play();
            } else {
              this.loops = 3;
              this.audio.pause();
            }
          };
          if (this.isRing) {
            this.audio.play();
            this.isRing = false;
          }
        })
        .catch(() => {});
      this.timer = setInterval(() => {
        this.allowRing = true;
        this.$refs.warrantyRef.getList();
        this.$refs.environmentRef.getList();
      }, this.refreshTime * 60 * 1000);
    },
    // 处理响铃
    handleRing(isRing) {
      if (this.allowRing && isRing) {
        this.isRing = true;
        this.allowRing = false;
        this.audio && this.audio.play();
      }
    },
    // 刷新维保工单
    handleRefresh(isRing) {
      this.handleRing(isRing);
      if (!isRing) {
        this.$refs.maintenanceRef.clearFixed();
      }
      this.$refs.maintenanceRef.getList();
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.screen {
  width: 100%;
  height: 100%;
  background: url("~@/assets/screen-bg.png") no-repeat;
  background-size: 100% 100%;
  .screen-content {
    width: 100%;
    height: 100%;
    margin: 20px 0 0 0;
  }
}
</style>
